.an {
    width:3px;
    height:3px;
    margin:auto;
    perspective:80px;
    position:relative;
    transform-style:preserve-3d;
}
.an-3d {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    animation:x 5s linear infinite;
}
.an-3d:nth-of-type(1)>div {
    width:2px;
    height:2px;
    position:absolute;
    top:0px;
    left:0px;
    transition:2s;
    opacity:0.3;
    box-shadow:0px 0px 2px 1px white;
    background:linear-gradient(pink,blue);
}
.an-3d:nth-of-type(2)>div {
    width:2px;
    height:2px;
    position:absolute;
    top:0px;
    left:0px;
    transition:2s;
    opacity:0.3;
    border-radius:50%;
    box-shadow:0px 0px 2px 1px white;
    background:radial-gradient(rgba(0,255,255,0) 10%,rgba(0,255,255,1) 65%);
}
.an-3d:nth-of-type(3)>div {
    width:10px;
    height:10px;
    position:absolute;
    top:-7px;
    left:-7px;
    box-shadow:0px 0px 2px 1px white;
    box-sizing:border-box;
    transition:2s;
    opacity:0.5;
    border-radius:3px;
    border:2px solid black;
    background:rgba(0,0,0,0.2);
}
.an-3d:nth-of-type(4)>div {
    width:10px;
    height:10px;
    position:absolute;
    top:-2px;
    box-sizing:border-box;
    left:-2px;
    transition:2s;
    opacity:0.5;
    background:radial-gradient(rgba(0,255,255,0) 10%,rgba(0,255,255,1) 65%);
    border-radius:50%;
    box-shadow:0px 0px 2px 1px white;
}
.an-3d:nth-of-type(1)>div:nth-of-type(1) {
    transform:rotate(0deg) translateZ(2px);
}
.an-3d:nth-of-type(1)>div:nth-of-type(2) {
    transform:rotateX(180deg) translateZ(2px);
}
.an-3d:nth-of-type(1)>div:nth-of-type(3) {
    transform:rotateY(-90deg) translateZ(2px);
}
.an-3d:nth-of-type(1)>div:nth-of-type(4) {
    transform:rotateY(90deg) translateZ(2px);
}
.an-3d:nth-of-type(1)>div:nth-of-type(5) {
    transform:rotateX(90deg) translateZ(2px);
}
.an-3d:nth-of-type(1)>div:nth-of-type(6) {
    transform:rotateX(-90deg) translateZ(2px);
}
.an-3d:nth-of-type(2)>div:nth-of-type(1) {
    transform:rotate(0deg) translateZ(7px);
}
.an-3d:nth-of-type(2)>div:nth-of-type(2) {
    transform:rotateX(180deg) translateZ(7px);
}
.an-3d:nth-of-type(2)>div:nth-of-type(3) {
    transform:rotateY(-90deg) translateZ(7px);
}
.an-3d:nth-of-type(2)>div:nth-of-type(4) {
    transform:rotateY(90deg) translateZ(7px);
}
.an-3d:nth-of-type(2)>div:nth-of-type(5) {
    transform:rotateX(90deg) translateZ(7px);
}
.an-3d:nth-of-type(2)>div:nth-of-type(6) {
    transform:rotateX(-90deg) translateZ(7px);
}
.an-3d:nth-of-type(3)>div:nth-of-type(1) {
    transform:rotate(0deg) translateZ(10px);
}
.an-3d:nth-of-type(3)>div:nth-of-type(2) {
    transform:rotateX(180deg) translateZ(10px);
}
.an-3d:nth-of-type(3)>div:nth-of-type(3) {
    transform:rotateY(-90deg) translateZ(10px);
}
.an-3d:nth-of-type(3)>div:nth-of-type(4) {
    transform:rotateY(90deg) translateZ(10px);
}
.an-3d:nth-of-type(3)>div:nth-of-type(5) {
    transform:rotateX(90deg) translateZ(10px);
}
.an-3d:nth-of-type(3)>div:nth-of-type(6) {
    transform:rotateX(-90deg) translateZ(10px);
}
.an-3d:nth-of-type(4)>div:nth-of-type(1) {
    transform:rotate(0deg) translateZ(20px);
}
.an-3d:nth-of-type(4)>div:nth-of-type(2) {
    transform:rotateX(180deg) translateZ(20px);
}
.an-3d:nth-of-type(4)>div:nth-of-type(3) {
    transform:rotateY(-90deg) translateZ(20px);
}
.an-3d:nth-of-type(4)>div:nth-of-type(4) {
    transform:rotateY(90deg) translateZ(20px);
}
.an-3d:nth-of-type(4)>div:nth-of-type(5) {
    transform:rotateX(90deg) translateZ(20px);
}
.an-3d:nth-of-type(4)>div:nth-of-type(6) {
    transform:rotateX(-90deg) translateZ(20px);
}
.an:hover .an-3d:nth-of-type(3)>div:nth-of-type(1) {
    transform:rotate(0deg) translateZ(25px) scale(1.5);
}
.an:hover .an-3d:nth-of-type(3)>div:nth-of-type(2) {
    transform:rotateX(180deg) translateZ(25px) scale(1.5);
}
.an:hover .an-3d:nth-of-type(3)>div:nth-of-type(3) {
    transform:rotateY(-90deg) translateZ(25px) scale(1.5);
}
.an:hover .an-3d:nth-of-type(3)>div:nth-of-type(4) {
    transform:rotateY(90deg) translateZ(25px) scale(1.5);
}
.an:hover .an-3d:nth-of-type(3)>div:nth-of-type(5) {
    transform:rotateX(90deg) translateZ(25px) scale(1.5);
}
.an:hover .an-3d:nth-of-type(3)>div:nth-of-type(6) {
    transform:rotateX(-90deg) translateZ(25px) scale(1.5);
}
@keyframes x {
    from {
        transform:rotate(0deg) rotateX(0deg) rotateY(0deg);
    }
    to {
        transform:rotate(360deg) rotateX(360deg) rotateY(360deg)
    }
}